<template>
    <div class="body">
        <div class="content">
            <!-- <vHeader title="安全中心" @return="$router.go('-1')" /> -->
            <div class="top-box">
                <div class="top-header">
                    <div class="top-header-back" @click="$router.go('-1')">
                        <van-icon name="arrow-left" size="0.5rem" />
                    </div>
                    <div class="top-header-title">安全中心</div>
                </div>
                <div class="top-content">
                    您的账户正在保障中
                </div>
            </div>

            <div class="menus">
                <div class="menu">
                    <div class="menu-l">
                        <img class="icon" src="../assets/images/safeCenter/icon1.png" />
                    </div>
                    <div class="menu-r">
                        <p class="menu-title">实名认证</p>
                        <p class="menu-tip" v-if="isRealName == false">去实名</p>
                        <p class="menu-tip menu-tip2" v-else>{{ RealInfo }} 已实名</p>
                    </div>
                </div>
                <div class="menu" @click="openPage('/bindPhone')">
                    <div class="menu-l">
                        <img class="icon" src="../assets/images/safeCenter/icon2.png" />
                    </div>
                    <div class="menu-r">
                        <p class="menu-title">手机号码</p>
                        <p class="menu-tip" v-if="isBindPhone == false">去绑定</p>
                        <p class="menu-tip menu-tip2" v-else>{{ Phone }}</p>
                    </div>
                </div>
                <div class="menu"  @click="openPage('/changePassword')">
                    <div class="menu-l">
                        <img class="icon" src="../assets/images/safeCenter/icon3.png" />
                    </div>
                    <div class="menu-r">
                        <p class="menu-title">登录密码</p>
                        <p class="menu-tip">修改</p>
                    </div>
                </div>
                <div class="menu" @click="openPage('/tradePassword')">
                    <div class="menu-l">
                        <img class="icon" src="../assets/images/safeCenter/icon4.png" />
                    </div>
                    <div class="menu-r">
                        <p class="menu-title">交易密码</p>
                        <p class="menu-tip">修改</p>
                    </div>
                </div>
                <div class="menu" @click="openPage('/system')">
                    <div class="menu-l">
                        <img class="icon" src="../assets/images/safeCenter/icon5.png" />
                    </div>
                    <div class="menu-r">
                        <p class="menu-title">登录设备</p>
                        <p class="menu-tip">查看</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
import api from "@/api/center";
import {
    mapState,
} from "vuex";
export default {
    data() {
        return {
            isRealName: false, //是否实名
            RealInfo: '',//实名信息
            Phone: '', //手机
            isBindPhone: false,//是否绑定手机
        }
    },
    computed: {
        ...mapState({
            loginUserinfo: state => state.global.loginUserinfo,
            baseData: state => state.global.baseData
        }),
    },
    methods: {
        init() { //初始化数据
            this.RealInfo = "吴*祖"
            this.Phone = "+86138****8888"
            this.isRealName = true
            this.isBindPhone = true
        },
        openPage(page) {
            this.$router.push(page)
        },
    },
    mounted() {
        this.init();
    },
}
</script>

<style lang="scss" rel="stylesheet/scss" type="text/scss" scoped>
.body {
    width: 100vw;
    height: 100vh;
    overflow-y: auto;
}

.content {
    background-color: #F0F5FD;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    padding: 35px 20px 15px 15px;
    // height: calc(100% - 30px);
    // width: calc(100% - 30px);
    position: relative;


    .top-box {
        position: relative;

        .top-header {
            width: 100%;
            display: flex;
            position: absolute;
            top: 0;
            left: 0;
            align-items: center;
            justify-content: center;
            height: 18px;

            .top-header-back {
                width: 10px;
                height: 18px;
                display: flex;
                position: absolute;
                left: 0px;
                top: 0px;
                align-items: center;
                justify-content: center;
            }

            .top-header-title {
                font-size: 16px;
                font-family: PingFang SC, PingFang SC-Medium;
                font-weight: 700;
                text-align: center;
                color: #444444;
                line-height: 22.5px;
            }
        }


        .top-content {
            font-family: PingFang SC, PingFang SC-Medium;
            margin: 0 auto;
            width: 276px;
            height: 289px;
            background-image: url('../assets/images/safeCenter/content.png');
            /* 其他可能需要的样式 */
            background-size: 100% 100%;
            /* 这将确保背景图片覆盖整个div，且不会被拉伸或压缩 */
            display: flex;
            align-items: flex-end;
            justify-content: center;
            padding-bottom: 30px;
            font-size: 16px;
            font-weight: 700;
        }
    }

    .menus {
        background: #ffffff;
        border-radius: 8px;
        height: 264px;
        padding: 0 15px;

        .menu {
            display: flex;
            align-items: center;
            position: relative;

            .menu-l {
                display: flex;
                align-items: center;
                justify-content: center;

                .icon {
                    margin-right: 12px;
                    width: 27px;
                    height: 27px;
                }
            }

            .menu-r {
                display: flex;
                align-items: center;
                border-bottom: 1px solid #eff0f3;
                flex: 1;

                .menu-title {
                    flex: 1;
                    line-height: 52px;
                    font-size: 14px;
                    text-align: left;
                    color: #444444;
                }

                .menu-tip {
                    line-height: 52px;
                    font-size: 14px;
                    text-align: left;
                    color: #8f949c;
                    margin-right: 12px;
                }

                .menu-tip2 {
                    color: #444444;
                }

                &::after {
                    content: " ";
                    display: block;
                    background-image: url('../assets/images/center/arr2.png');
                    width: 7px;
                    height: 11px;
                    background-size: 100% 100%;
                    top: 20px;
                    right: 15px;
                }
            }


        }
    }
}
</style>